<template>
  <div class="fundIncrease-box">
    <div class="subtitle-short fundIncrease-titleSize">基金收支净额同比增幅</div>
    <div id="table_fundIncrease" class="fundIncrease-tableSize"/>
  </div>
</template>

<script>
import echarts from "_echarts@4.9.0@echarts";

export default {
  name: "table_fundIncrease",
  mounted() {
    this.tableInit_fundIncrease()
  },
  methods: {
    tableInit_fundIncrease() {
      const myChart = echarts.init(document.getElementById("table_fundIncrease"));
      const option = {
        grid: {
          top: '25%',
          right: '0%',
          bottom: '15%',
          left: '13%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          top: '5%',
          data: ['基金收入', '基金支出', '基金净额'],
          textStyle: {
            color: '#fff'
          },
        },
        xAxis: [
          {
            type: 'category',
            name: '月',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisPointer: {
              type: 'shadow'
            },
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '万元',
            min: 0,
            max: 500,
            interval: 100,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              formatter: '{value}',
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + '件';
              }
            },
            barWidth: 6,
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#009DFE'
                }, {
                  offset: 1,
                  color: '#04253B'
                }]),
              }
            },
            data: [
              280, 309, 330, 392, 386, 407, 395, 422, 386, 360, 324, 293
            ]
          },
          {
            name: '基金支出',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + '件';
              }
            },
            barWidth: 6,
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FF8B3A'
                }, {
                  offset: 1,
                  color: '#04253B'
                }]),
              }
            },
            data: [
              180, 209, 230, 292, 286, 307, 295, 322, 286, 260, 224, 193
            ]
          },
          {
            name: '基金净额',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + '件';
              }
            },
            barWidth: 6,
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00F2F8'
                }, {
                  offset: 1,
                  color: '#04253B'
                }]),
              }
            },
            data: [
              150, 159, 180, 242, 236, 257, 245, 282, 236, 210, 174, 143
            ]
          },
        ]
      };
      option && myChart.setOption(option);
    },
  }
}
</script>

<style scoped>
.fundIncrease-box {
  height: 40%;
  width: 100%;
}

.fundIncrease-titleSize {
  height: 14%;
  line-height: 200%;
}

.fundIncrease-tableSize {
  width: 100%;
  height: 80%
}
</style>
